<template>
  <div>
    <el-table 
    	ref="multipleTable" 
    	@selection-change="handleSelectionChange" 
    	empty-text='未找到符合筛选条件的内容，请重新筛选' 
    	border fit
      highlight-current-row 
      style="width: 100%" 
      v-loading.lock="loading" 
      :data="tableData">
      <el-table-column
        v-if="multipleTable" 
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column type="index" label="序号" align="center" width="50">
      </el-table-column>
      <el-table-column 
      	v-for="(column, columnIndex) in columns" :key="columnIndex" :prop="column.prop"
       :filters="column.filters" 
       :filter-method="column.filters?column.filterMethod?column.filterMethod:filterMethod:null"
       :column-key="column.columnKey"
       :label="column.label">
        <template slot-scope="scope">
          <el-popover v-if="column.popOverContent"
				    placement="top-start"
				    :title="column.popTitle"
				    width="200"
				    trigger="hover"
				    :content="qureyFilter(scope.row,column.popOverContent,column.filter)">
            <span  slot="reference">
              {{qureyFilter(scope.row,column.prop,column.filter,column.filterParams)}}
          	</span>
          </el-popover>
          <span v-if="column.goto">
	         	<router-link :to="{path:column.goto,query:{id:qureyFilter(scope.row,column.query,column.filter)}}">
	           	{{qureyFilter(scope.row,column.prop,column.filter)}}
	         	</router-link>
	        </span>
          <span v-if="!column.goto&&!column.popOverContent">
            <span v-if="column.html" v-html="qureyFilter(scope.row,column.prop,column.filter,column.filterParams)" style="text-align: center">
            </span>
            <span v-else>
              {{qureyFilter(scope.row,column.prop,column.filter,column.filterParams)}}
            </span>
          </span>
        </template>
      </el-table-column>
      <slot name="append"/>
    </el-table>
    <!-- <div style="margin-top: 10px;text-align: center;">
      <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange"
                     :current-page.sync="queryParams.page" :page-sizes="pageSizes"
                     :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

    </div> -->
  </div>
</template>
<script>
import Vue from "vue";
// import {page, common} from '@/plugin/axios/plug'
export default {
  // mixins: [page, common],
  name: "dl-table",
  data() {
    return {
      Vue
    };
  },
  props: {
    dlData: {
      type: Object,
      default: null
    },
    dlRules: {
      type: Object,
      default: null
    },
    total: {
      type: Number,
      default: 0
    },
    multipleTable: {
      type: Boolean
    },
    loading: {
      type: Boolean
    },
    tableData: {
      type: Array,
      default: {}
    },
    columns: {
      type: Array,
      default: null
    },
    filters: {
      type: Array
    }
  },
  methods: {
    qureyFilter(row, val, filters, filterParams) {
      // console.log(filterParams)
      let rtn = row;
      let arr = val.split(".");
      // console.log(arr)
      for (let idx of arr) {
        rtn = rtn[idx];
      }
      if (typeof filters === "function") {
        return filters(row[val],row , filterParams);
      } else {
        return Vue.filter(filters)(rtn, filterParams);
      }
    },
    filterMethod(value, row, column) {
      if (value == row[column.property]) {
        return row;
      }
    },
    filterHandler(value, row, column) {
      // console.log(value, row, column)
      const property = column["property"];
      return "暂无数据";
    },
    handleSelectionChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
    }
  }
};
</script>
